<template>
  <div class="grade-detail">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>成绩详情</span>
          <el-button @click="handleBack">返回</el-button>
        </div>
      </template>

      <!-- 基本信息 -->
      <div class="basic-info">
        <h3>基本信息</h3>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="学生姓名">{{ gradeInfo.studentName }}</el-descriptions-item>
          <el-descriptions-item label="学号">{{ gradeInfo.studentId }}</el-descriptions-item>
          <el-descriptions-item label="考试名称">{{ gradeInfo.examTitle }}</el-descriptions-item>
          <el-descriptions-item label="考试时间">{{ gradeInfo.examTime }}</el-descriptions-item>
          <el-descriptions-item label="总分">{{ gradeInfo.totalScore }}分</el-descriptions-item>
          <el-descriptions-item label="是否通过">
            <el-tag :type="gradeInfo.isPassed ? 'success' : 'danger'">
              {{ gradeInfo.isPassed ? '通过' : '未通过' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="作弊标记">
            <el-tag :type="getCheatingTagType(gradeInfo.cheatingFlag)">
              {{ getCheatingTagText(gradeInfo.cheatingFlag) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ gradeInfo.startTime }}</el-descriptions-item>
          <el-descriptions-item label="提交时间">{{ gradeInfo.submitTime }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 答题详情 -->
      <div class="answer-detail">
        <h3>答题详情</h3>
        <el-table :data="answerList" border style="width: 100%">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="questionContent" label="题目" min-width="300" show-overflow-tooltip />
          <el-table-column prop="answer" label="学生答案" min-width="200" show-overflow-tooltip />
          <el-table-column prop="correctAnswer" label="正确答案" min-width="200" show-overflow-tooltip />
          <el-table-column prop="score" label="得分" width="80">
            <template #default="{ row }">
              {{ row.score }}分
            </template>
          </el-table-column>
          <el-table-column prop="isCorrect" label="是否正确" width="100">
            <template #default="{ row }">
              <el-tag :type="row.isCorrect ? 'success' : 'danger'">
                {{ row.isCorrect ? '正确' : '错误' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 作弊记录 -->
      <div v-if="cheatingEvents.length > 0" class="cheating-events">
        <h3>作弊记录</h3>
        <el-timeline>
          <el-timeline-item
            v-for="event in cheatingEvents"
            :key="event.id"
            :type="getCheatingEventType(event.eventType)"
            :timestamp="event.eventTime"
          >
            {{ event.eventType }} - {{ event.eventData }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'

const router = useRouter()
const route = useRoute()

const gradeInfo = ref<any>({})
const answerList = ref<any[]>([])
const cheatingEvents = ref<any[]>([])

// 获取作弊标记类型
const getCheatingTagType = (flag: number) => {
  const map: Record<number, string> = {
    0: 'info',
    1: 'warning',
    2: 'danger'
  }
  return map[flag] || 'info'
}

// 获取作弊标记文本
const getCheatingTagText = (flag: number) => {
  const map: Record<number, string> = {
    0: '无',
    1: '疑似',
    2: '确认'
  }
  return map[flag] || '未知'
}

// 获取作弊事件类型
const getCheatingEventType = (type: string) => {
  const map: Record<string, string> = {
    '切屏': 'warning',
    '人脸识别异常': 'danger'
  }
  return map[type] || 'info'
}

// 返回
const handleBack = () => {
  router.back()
}

// 加载数据
onMounted(async () => {
  const examId = route.query.examId
  const studentId = route.query.studentId
  console.log('加载数据')
  try {
    const res = await axios.get('/api/exams/grade/detail', {
      params: {
        examId,
        studentId
      }
    })
    const data = res.data.data
    gradeInfo.value = data.gradeInfo || {}
    answerList.value = data.answerList || []
    cheatingEvents.value = data.cheatingEvents || []
  } catch (e) {
    gradeInfo.value = {}
    answerList.value = []
    cheatingEvents.value = []
  }
})
</script>

<style scoped>
.grade-detail {
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.basic-info,
.answer-detail,
.cheating-events {
  margin-bottom: 20px;
}

h3 {
  margin-bottom: 16px;
  font-weight: 500;
  color: #303133;
}

:deep(.el-descriptions) {
  margin-bottom: 20px;
}

:deep(.el-timeline) {
  margin-top: 16px;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-table) {
  margin-bottom: 20px;
  min-width: 900px;
}

:deep(.el-table__body-wrapper) {
  overflow-y: auto;
  max-height: 400px;
}
</style>
